<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        
        ul {
            list-style: none;
            width: 300px;
            margin: 100px auto;
            border: 1px solid #333;
        }
        
        li {
            height: 40px;
            line-height: 40px;
            text-align: center;
        }
    </style>
</head>

<body>
    <!-- 
        利用事件委托的方法，给一个无序列表的列表项添加点击更改背景色事件。简单说明思路。
     -->
    <ul id="box">
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
    </ul>
    <script src="common.js"></script>
    <script>
        // 将子级的公共类型的事件委托给他们的父级元素添加,在父级内部找到真正触发事件的最底层的事件源

        // 获取元素
        var box = my$("box");
        var li = box.children;

        // 给ul添加点击事件
        box.onclick = function(e) {
            // 借用事件函数内部的一个参数e,e是事件对象
            // 只要触发事件,函数内部就会得到有关事件对象的一系列数据
            for (var i = 0; i < li.length; i++) {
                li[i].style.backgroundColor = '';
            }
            // e.target属性记录的就是真正触发事件的事件源
            e.target.style.backgroundColor = 'skyblue';
        }
    </script>
</body>

</html>